<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css reset */
        html,body{height: 100%;overflow: hidden;}
        html,body,h1,h2,h3,h4,h5,h6,p,ul,li{margin: 0px;padding: 0px;font: 14px "微软雅黑";}
        a{text-decoration: none;display: block;}
        li{list-style: none;}
        img{display: block;}
        /* css reset */

        /* common css */
        .clearfix{*zoom: 1;}
        .clearfix:after{content: "";display: block;clear: both;}
        .commonTitle{ color:#009ee0; font-size:80px; line-height:0.8; font-weight:bold; letter-spacing:-5px;}
        .commonText{ color:white; line-height:1.5; font-size:15px;}
        /* common css */

        /*头部样式  */
        #head{background: white!important;width: 100%;}
        #head .headMain{width: 1100px;height: 80px;margin: 0 auto;position: relative;}
        #head .headMain>.logo{float: left;margin-top: 30px;}
        #head .headMain>.nav{float:right;margin-top: 50px;}
        #head .headMain>.nav>.list li{float: left;margin-left: 40px;position: relative;}
        #head .headMain>.nav>.list>li .up{color: black;position: absolute;width: 0px;overflow: hidden;transition: 1s width;}
        #head .headMain>.nav>.list>li:hover .up{width: 100%;}
        #head .headMain>.arrow{z-index: 2; width: 21px;height: 11px;background: url(img/menuIndicator.png);position: absolute;left: 50%;bottom: -11px;transition: 1s,width;}
        /* 头部样式 */

        /* 内容区样式 */
        #content{background: gray;position: relative;overflow: hidden;width: 100%;}
        #content>.list{position: absolute;left: 0;top: 0;width: 100%;transition: 1s top;}
        #content>.list>li{overflow: hidden; position: relative;background-position: 50% 50%!important;}
        #content>.list>li > section{ width: 1100px;height: 520px;position: absolute;left: 0;top: 0;right: 0;bottom: 0;margin: auto;}
        
        /* 第一屏 */
        #content>.list>.home{background: url("img/bg1.jpg") no-repeat;}
        #content>.list>.home .home1>li>div{color: white;}
        #content>.list>.home .home1{width: 100%;height: 100%;perspective: 1000px;transform-style: preserve-3d;}
        #content>.list>.home .home1>li{visibility: hidden;position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
        #content>.list>.home .home1>li.active{visibility: visible;}
        #content>.list>.home .home1>li:nth-child(1){background: #dc6c5f;}
        #content>.list>.home .home1>li:nth-child(2){background: #95dc84;}
        #content>.list>.home .home1>li:nth-child(3){background: #64b9d2;}
        #content>.list>.home .home1>li:nth-child(4){background: #000000;}
        #content>.list>.home .home1>li>div{text-align: center;line-height: 520px;}

                  /* 使小圆点居中设置home2开启定位 left right为0  使其宽度为父元素100% li设置为行内块元素使其能被text-align居中设置 */
        #content>.list>.home .home2{position: absolute;left: 0;right: 0;bottom:0;text-align: center;}
        #content>.list>.home .home2 >li{cursor: pointer; border-radius: 50%;width: 20px;height:20px;background:rgba(255, 255, 255,0.5);display: inline-block;box-shadow: 0 0 4px rgba(25, 25, 25, 0.8);}
        #content>.list>.home .home2 >li.active{background: white;cursor: default;}

        /* 从左往右点小圆点 */
        #content>.list>.home .home1>li.leftHide{visibility: hidden;animation: 2s leftHide 1 linear;}
        
        #content>.list>.home .home1>li.rightShow{visibility:visible;animation: 2s rightShow 1 linear;}
                /* 0%时为元素初始状态 */
        @keyframes leftHide {
            0%{visibility: visible;}
            50%{transform: translateX(-40%) rotateY(30deg) scale(.8);}
            100%{transform: translateZ(-200px);}
            
        }
        @keyframes rightShow {
            0%{visibility: hidden;transform: translateZ(-200px);}
            50%{transform: translateX(40%) rotateY(-30deg) scale(.8);}
            100%{}
            
        }

        /* 从右往左点小圆点 */
        #content>.list>.home .home1>li.leftShow{visibility: visible;animation: 2s leftShow 1 linear;}
        #content>.list>.home .home1>li.rightHide{visibility: hidden;animation: 2s rightHide 1 linear;}
        @keyframes leftShow {
            0%{visibility: hidden;transform: translateZ(-200px);}
            50%{transform: translateX(-40%) rotateY(30deg) scale(.8);}
            100%{}
            
        }
        @keyframes rightHide {
            0%{visibility: visible;}
            50%{transform: translateX(40%) rotateY(-30deg) scale(.8);}
            100%{transform: translateZ(-200px);}
            
        }

        
        
        /*第二屏*/
        #content>.list>.cours{background: url("img/bg2.jpg") no-repeat;}
        #content>.list>.cours .course1{margin: 50px;position: relative;z-index: 2;}
        #content>.list>.cours .course2{width: 400px;margin-left: 50px;position: relative;z-index: 2;}
        #content>.list>.cours .course3{width: 480px;position: absolute;right: 50px;top: 70px;z-index: 2;}


                  /* perspective景深效果（作用于后代元素）  transform-style 3d舞台（只作用于子元素） 实现3d效果*/
        #content>.list>.cours .course3 .item{width: 120px;height: 132px;position: relative;float: left;perspective: 500px;transform-style: preserve-3d;}
        #content>.list>.cours .course3 .item .face,#content>.list>.cours .course3 .item .backface{position: absolute;left: 0;top: 0;width:100%;height:100%;box-sizing: border-box;padding: 15px;}
        #content>.list>.cours .course3 .item .backface{background-position: 50% 50% !important;}
                /* 设置background时会默认设置 background-position +important防止被覆盖*/
        #content>.list>.cours .course3 .item:nth-of-type(1) .backface{background: url(img/apcoa.png) no-repeat;}
        #content>.list>.cours .course3 .item:nth-of-type(2) .backface{background: url(img/binoli.png) no-repeat;}
        #content>.list>.cours .course3 .item:nth-of-type(3) .backface{background: url(img/bks.png) no-repeat;}
        #content>.list>.cours .course3 .item:nth-of-type(4) .backface{background: url(img/gu.png) no-repeat;}
        #content>.list>.cours .course3 .item:nth-of-type(5) .backface{background: url(img/hlx.png) no-repeat;}
        #content>.list>.cours .course3 .item:nth-of-type(6) .backface{background: url(img/lbs.png) no-repeat;}
        #content>.list>.cours .course3 .item:nth-of-type(7) .backface{background: url(img/leonberg.png) no-repeat;}
        #content>.list>.cours .course3 .item:nth-of-type(8) .backface{background: url(img/pcwelt.png) no-repeat;}
        #content>.list>.cours .course3 .item:nth-of-type(9) .backface{background: url(img/tata.png) no-repeat;}
        #content>.list>.cours .course3 .item:nth-of-type(10) .backface{background: url(img/bks.png) no-repeat;}
        #content>.list>.cours .course3 .item:nth-of-type(11) .backface{background: url(img/bks.png) no-repeat;}
        #content>.list>.cours .course3 .item:nth-of-type(12) .backface{background: url(img/bks.png) no-repeat;}
               /* 隐藏背面 backface-visibility: hidden;*/
        #content>.list>.cours .course3 .item .face{background-color: #009ee0;color: white; transform: rotateY(180deg);backface-visibility: hidden;transition: 2s transform;}
        #content>.list>.cours .course3 .item .backface{transition: 2s transform;}
        #content>.list>.cours .course3 .item:hover .face{transform: rotateY(360deg);}
        #content>.list>.cours .course3 .item:hover .backface{transform: rotateY(180deg);}

        #content>.list>.cours .course3 .line{width: 9px;height: 410px;background:url(img/plus_row.png) no-repeat;position: absolute;top: -7px;}
        #content>.list>.cours .course3 .line:nth-last-of-type(1){left: -5px;}
        #content>.list>.cours .course3 .line:nth-last-of-type(2){left: 115px;}
        #content>.list>.cours .course3 .line:nth-last-of-type(3){left: 235px;}
        #content>.list>.cours .course3 .line:nth-last-of-type(4){left: 355px;}
        #content>.list>.cours .course3 .line:nth-last-of-type(5){left: 475px;}



        /*第三屏*/
        #content>.list>.works{background: url("img/bg3.jpg") no-repeat;}
        #content>.list>.works .works1{margin: 50px 0px 100px 50px;position: relative;z-index: 2;}
        #content>.list>.works .works2>.item{position: relative;z-index: 2;float: left;width: 220px;height: 133px;margin: 0 1px;position: relative;overflow: hidden;}
        #content>.list>.works .works2>.item .mask{z-index: 2;position: absolute;left: 0;top: 0;bottom: 0;right: 0;box-sizing: border-box;padding:10px;background-color: black;opacity: 0;color: white;transition: 1s opacity;}
        #content>.list>.works .works2>.item:hover .mask{opacity: 0.8;}
        #content>.list>.works .works2>.item img{transition: 0.5s;}
        #content>.list>.works .works2>.item:hover img{transform: rotate(30deg) scale(1.5);}
        #content>.list>.works .works2>.item .icon{width: 32px;height: 34px;margin: 0 auto;margin-top: 10pox;background: url("img/zoomico.png");transition: 0.5s background-position;}
        #content>.list>.works .works2>.item .icon:hover{background-position: 0 -35px;}
        #content>.list>.works .works2{margin-left: 50px;}
        #content>.list>.works .works2>.item:last-of-type{width: 332px;}
        #content>.list>.works .works3{width: 167px;height: 191px;background: url(img/robot.png) no-repeat;position: absolute;left: 900px;top: 170px;animation: works3Move 3s linear infinite;}
        @keyframes works3Move{
            0%{

            }
            49%{
                transform: translate(-390px) rotateY(0deg);
            }
            50%{
                transform: translate(-400px) rotateY(180deg);

            }
            100%{
                transform: translate(0px) rotateY(180deg);
            }
        }

        
        /*第四屏*/
        #content>.list>.abount{background: url("img/bg4.jpg") no-repeat;}
        #content>.list>.abount .abount1{margin: 50px 0 100px 50px;}
        #content>.list>.abount .abount2{margin-left:50px ;width: 400px;}
        #content>.list>.abount .abount3>.item{transition: 1s; z-index: 2; width: 260px;height: 200px;position: absolute;border: rgba(255, 255, 255, 0.5) solid 4px;border-radius: 8px;overflow: hidden;}
        #content>.list>.abount .abount3>.item:nth-of-type(1){left: 750px;top: 50px;}
        #content>.list>.abount .abount3>.item:nth-of-type(2){left: 600px;top: 290px;}
        #content>.list>.abount .abount4{width: 357px;height: 998px;position: absolute;background: url(img/greenLine.png) no-repeat;left: 50%;top: -200px;}
        #content>.list>.abount .abount3>.item>span,#content>.list>.abount .abount3>.item>ul{position: absolute;top: 0;left: 0;bottom: 0;right: 0;}
        #content>.list>.abount .abount3>.item:nth-child(1)>span{background: url(img/about2.jpg) no-repeat;transform: scale(1.5);transition: 1s transform;}
        #content>.list>.abount .abount3>.item:nth-child(2)>span{background: url(img/about4.jpg) no-repeat;transform: scale(1.5);transition: 1s transform;}
        #content>.list>li > .commonTitle{ color:#009ee0; font-size:80px; line-height:0.8; font-weight:bold; letter-spacing:-5px;}
        #content>.list>.abount .abount3>.item:hover span{transform: scale(1);}
        #content>.list>.abount .abount3>.item>ul li{float: left;position: relative;overflow: hidden;}
        #content>.list>.abount .abount3>.item>ul li img{position: absolute;transition: 1s left,1s top;}
        
        
        /* 第五屏 */
        #content>.list>.team{background: url("img/bg5.jpg") no-repeat;}
        #content>.list>.team .team1{margin: 50px;width: 400px;float: left;transition: 1s;}
        #content>.list>.team .team2{margin: 50px;width: 400px;float: right;transition: 1s;}

        
        #content>.list>.team .team3{top: 250px; width: 944px;height: 448px;position: absolute;left: 50%;margin-left: -472px;}
        #content>.list>.team .team3 ul{position: relative;height: 100%;}
        #content>.list>.team .team3 ul>li{transition: 1s opacity; width: 118px;height: 100%;background: url(img/team.png)no-repeat;float: left;}
        #content>.list>.team .team3 ul>li:nth-child(1){background-position: 0,0;}
        #content>.list>.team .team3 ul>li:nth-child(2){background-position: -118px,0;}
        #content>.list>.team .team3 ul>li:nth-child(3){background-position: -236px,0;}
        #content>.list>.team .team3 ul>li:nth-child(4){background-position: -354px,0;}
        #content>.list>.team .team3 ul>li:nth-child(5){background-position: -472px,0;}
        #content>.list>.team .team3 ul>li:nth-child(6){background-position: -590px,0;}
        #content>.list>.team .team3 ul>li:nth-child(7){background-position: -708px,0;}
        #content>.list>.team .team3 ul>li:nth-child(8){background-position: -826px,0;}
        #content>.list>.team .team3 canvas{position: absolute;top: 0px;}

        /* 小圆点 */
        #content>.dot{position: fixed;right: 10px;top: 50%;}
        #content>.dot>li{width: 10px;height: 10px;border:pink 5px solid;border-radius: 50%;cursor: pointer;margin-top: 10px;}
        #content>.dot>li.active{background: white;}
        /* 内容区样式 */

        /* 出入场样式 */
        #content>.list>.home .home1,#content>.list>.home .home2{transition: 1s transform,1s opacity;}
        .cours  .plane1{ width:359px; height:283px; background:url(img/plane1.png) no-repeat; position:absolute; left:300px; top:-100px; transition:1s;}
	    .cours .plane2{ width:309px; height:249px; background:url(img/plane2.png) no-repeat; position:absolute; left:-100px; top:200px; transition:1s;}
	    .cours .plane3{ width:230px; height:182px; background:url(img/plane3.png) no-repeat; position:absolute; left:300px; top:400px; transition:1s;}

        .works .pencel1{ width:180px; height:97px; background:url(img/pencel1.png) no-repeat; position:absolute; transition:1s; left:500px; top:0;}
	    .works .pencel2{ width:268px; height:38px; background:url(img/pencel2.png) no-repeat; position:absolute; transition:1s; left:300px; top:250px;}
	    .works .pencel3{ width:441px; height:231px; background:url(img/pencel3.png) no-repeat; position:absolute; transition:1s; left:650px; top:300px;}
	
    </style>
    <!-- 分辨率范围：1200——2000 -->
</head>
<body>
    <section id="warp">
        <!-- 流体布局 -->
        <header id="head">
            <!-- 固定布局 -->
            <div class="headMain">
                <h1 class="logo">
                    <a href="javascript:;"><img src="./img/logo.png"></a>
                </h1>
                <nav class="nav">
                    <ul class="list clearfix">

                        <li>
                            <a href="javascript:;">
                                <div class="up"><img src="img/home_gruen.png"></div>
                                <div class="down"><img src="img/home.png"></div>
                            </a>
                        </li>
                        <li><a href="javascript:;">
                            <div class="up">Cours</div>
                            <div class="down">Cours</div>
                        </a></li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">Works</div>
                                <div class="down">Works</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">Abount</div>
                                <div class="down">Abount</div>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <div class="up">Team</div>
                                <div class="down">Team</div>
                            </a>
                        </li>

                    </ul>
                </nav>
                <div class="arrow"></div>
            </div>

        </header>
        <section id="content">
            <ul class="list">
                <li class="home">
                    <section>
                        <ul class="home1">
                            <li class="commonTitle active ">
                                <div class="item ">one layer</div>
                            </li>
                            <li class="commonTitle">
                                <div class="item ">two layer</div>
                            </li>
                            <li class="commonTitle">
                                <div class="item ">three layer</div>
                            </li>
                            <li class="commonTitle">
                                <div class="item ">four layer</div>
                            </li>
                        </ul>
                        <ul class="home2">
                            <li class="active"></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </section>
                </li>
                <li class="cours">
                    <section>
                        <header class="course1 commonTitle">
                            <span>EINIGE</span><br>
                            <span>UNSERER</span><br>
                            <span>KUNDEN</span><br>
                        </header>

                        <div class="course2 commonText">
                            <p>Das Kundenvertrauen in unsere Kompetenz ist die notwendige Basis einer erfolgreichen Zusammenarbeit, gleichzeitig aber auch das größte Lob, das man uns entgegenbringen kann. 
                                <br />
                               Diese und viele weitere große und kleine Kunden vertrauen uns seit Jahren, was uns stolz macht, und dafür sagen wir an dieser Stelle einfach mal.
                            </p>
                        </div>
                        <div class="course3">
                            <span class="line"></span>
                            <span class="line"></span>
                            <span class="line"></span>
                            <span class="line"></span>
                            <span class="line"></span>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>
                            <div class="item">
                                <div class="backface"></div>
                                <div class="face">fall in love</div>
                            </div>

                            
                        </div>
                        <div class="plane1"></div>
                        <div class="plane2"></div>
                        <div class="plane3"></div>
                    </section>
                </li>
                <li class="works">
                    <section>
                    <header class="works1 commonTitle">
                        <span>EINBLICK</span><br/>
                        <span>ERKENNTNIS</span><br/>
                        <span>ERGEBNIS</span><br/>
                    </header>
                    <div class="works2">
                        
                        <div class="item">
                            <img src="img/worksimg1.jpg">
                            <div class="mask">
                                <span>fall in love</span>
                                <div class="icon"></div>
                            </div>
                        </div>


                        <div class="item">
                            <img src="img/worksimg2.jpg">
                            <div class="mask">
                                <span>fall in love</span>
                                <div class="icon"></div>
                            </div>
                        </div>


                        <div class="item">
                            <img src="img/worksimg3.jpg">
                            <div class="mask">
                                <span>fall in love</span>
                                <div class="icon"></div>
                            </div>
                        </div>


                        <div class="item">
                            <img src="img/worksimg4.jpg">
                            <div class="mask">
                                <span>fall in love</span>
                                <div class="icon"></div>
                            </div>
                        </div>
                    
                    
                    
                    
                    </div>
                    <div class="works3"></div>
                    <div class="pencel1"></div>
                    <div class="pencel2"></div>
                    <div class="pencel3"></div>
                    </section>
               </li>
                <li class="abount">
                    <section>
                        <header class="abount1 commonTitle">
                            <span>DIE</span><br>
                            <span>SPEZIELLE</span><br>
                            <span>VIELFALT</span><br>
                        </header>

                        <div class="abount2">
                            <p class="commonText">Der bunte Medienmix ist die Faszination die uns antreibt und das, was man an uns schätzt. Von A bis Z und von vorne bis hinten nehmen wir Ihr Projekt unter unsere Fittiche und lassen es zu etwas Großartigem heranwachsen.</p>
                        </div>


                        <div class="abount3">
                            <div class="item">
                                <span></span>
                                <ul data-src="img/about1.jpg"></ul>
                            </div>
                            <div class="item">
                                <span></span>
                                <ul data-src="img/about3.jpg"></ul>
                            </div>
                        </div>

                        <div class="abount4"></div>

                    </section>
                </li>
                <li class="team">
                    <section>
                        <header class="team1 commonTitle">
                            <span>WIR SIND</span><br>
                            <span>VOXELAIR</span><br>
                        </header>
                            <div class="team2 ">
                                <p class="commonText">Wir sind seit 2002 eine Full-Service-Werbeagentur mit Stammsitz in Heimsheim, zwischen Stuttgart und Karlsruhe. </p>
                                <p class="commonText">Über 60 Jahre Erfahrung vereinen das gesamte VoxelAir-Team. Dabei hat jedes Voxel neben professionellem Allroundwissen auch sein ganz spezielles Gebiet, um selbst die individuellsten Kundenwünsche schnell und kompetent umzusetzen.</p>
                            </div>
                            <div class="team3">
                            <ul>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                                <li></li>
                            </ul>
                        </div>
                    </section>
                </li>
            </ul>
            <ul class="dot">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </section>
    </section>




    </section>
</body>
<script>
    window.onload=function(){
        var timer=0;
        var arrowEl=document.querySelector("#head .headMain>.arrow");
        var liNodes=document.querySelectorAll("#head .headMain>.nav>.list>li");
        var firstLi=liNodes[0];
        var upClass=document.querySelectorAll("#head .headMain>.nav .up");
        var firstUp=upClass[0];
        var head=document.querySelector("#head");
        var content=document.querySelector("#content")
        var cLiNodes=document.querySelectorAll("#content .list>li")
        var cList=document.querySelector("#content .list")

        var home2LiNodes=document.querySelectorAll("#content>.list>.home .home2>li")
        var home1LiNodes=document.querySelectorAll("#content>.list>.home .home1>li")
        var home1=document.querySelector("#content>.list>.home .home1")
        

        var abountUls=document.querySelectorAll("#content>.list>.abount .abount3>.item>ul")
        var imgNodes=document.querySelectorAll("#content>.list>.abount .abount3>.item>ul li img");

        var dotLiNodes=document.querySelectorAll(" #content>.dot>li");

        var team3Lis=document.querySelectorAll("#content>.list>.team .team3 ul>li")
        var team3Ul=document.querySelector("#content>.list>.team .team3 ul")
        var team3=document.querySelector("#content>.list>.team .team3")
        //now 同步当前屏的索引 同步了now和this.index 但没同步now
        var now=0
        var oldindex=0
        var time3D=0
        var autoIndex=0
        var timer1=0
        var timer2=0

        var preIndex=0

        // 出入场
        var anArr=[
            {
                inAn:function(){
                    var home1=document.querySelector("#content>.list>.home .home1")
                    var home2=document.querySelector("#content>.list>.home .home2")
                    home1.style.transform="translateY(0px)";
                    home2.style.transform="translateY(0px)";
                    home1.style.opacity=1;
                    home2.style.opacity=1;
                },
                outAn:function(){
                    var home1=document.querySelector("#content>.list>.home .home1")
                    var home2=document.querySelector("#content>.list>.home .home2")
                    home1.style.transform="translateY(-400px)";
                    home2.style.transform="translateY(100px)";
                    home1.style.opacity=0;
                    home2.style.opacity=0;
                }
            },
            {
                inAn:function(){
                    var plane1=document.querySelector(".cours  .plane1");
                    var plane2=document.querySelector(".cours  .plane2");
                    var plane3=document.querySelector(".cours  .plane3");
                    plane1.style.transform="translate(0px,0px)"
                    plane2.style.transform="translate(0px,0px)"
                    plane3.style.transform="translate(0px,0px)"
                },
                outAn:function(){
                    var plane1=document.querySelector(".cours  .plane1");
                    var plane2=document.querySelector(".cours  .plane2");
                    var plane3=document.querySelector(".cours  .plane3");

                    plane1.style.transform="translate(-200px,-200px)"
                    plane2.style.transform="translate(-200px,200px)"
                    plane3.style.transform="translate(200px,-200px)"
                }
            },
            {
                inAn:function(){
                    var pencel1=document.querySelector(".works .pencel1")
                    var pencel2=document.querySelector(".works .pencel2")
                    var pencel3=document.querySelector(".works .pencel3")
                    pencel1.style.transform="translateY(0px)"
                    pencel2.style.transform="translateY(0px)"
                    pencel3.style.transform="translateY(0px)"
                },
                outAn:function(){
                    var pencel1=document.querySelector(".works .pencel1")
                    var pencel2=document.querySelector(".works .pencel2")
                    var pencel3=document.querySelector(".works .pencel3")
                    pencel1.style.transform="translateY(-100px)"
                    pencel2.style.transform="translateY(100px)"
                    pencel3.style.transform="translateY(100px)"
                }
            },
            {
                inAn:function(){
                    var rect1=document.querySelector("#content>.list>.abount .abount3>.item:nth-of-type(1)")
                    
                    var rect2=document.querySelector("#content>.list>.abount .abount3>.item:nth-of-type(2)")
                    rect1.style.transform="rotate(0deg)"
                    rect2.style.transform="rotate(0deg)"
                },
                outAn:function(){
                    var rect1=document.querySelector("#content>.list>.abount .abount3>.item:nth-of-type(1)")
                    var rect2=document.querySelector("#content>.list>.abount .abount3>.item:nth-of-type(2)")


                    rect1.style.transform="rotate(45deg)"
                    rect2.style.transform="rotate(-45deg)"
                }
            },
            {
                inAn:function(){
                    var team1=document.querySelector("#content>.list>.team .team1")
                    var team2=document.querySelector("#content>.list>.team .team2")
                    team1.style.transform="translateX(0px)"
                    team2.style.transform="translateX(0px)"
                },
                outAn:function(){
                    var team1=document.querySelector("#content>.list>.team .team1")
                    var team2=document.querySelector("#content>.list>.team .team2")
                    team1.style.transform="translateX(-200px)"
                    team2.style.transform="translateX(200px)"
                }
            }
        ]
       for(var i=0;i<anArr.length;i++){
           anArr[i].outAn();
       }

       setTimeout(function(){
           anArr[0].inAn()
       }, 1000);

        headBind();
        contentBind();

        //当页面缩放重新定义浏览器尺寸  内容区宽高就应该相应重新设置 ul的top也应该改变
        window.onresize=function(){
            /*
            调整分辨率
                1.视口只能出现一屏 contentBind（）；
                2.每一屏的偏移量需要重新调整 因为视口只能出现一屏
                3.小箭头位置也需要同步
            */
            contentBind();
            cList.style.top=-now*(document.documentElement.clientHeight-head.offsetHeight)+"px"
            arrowEl.style.left=liNodes[now].offsetLeft+liNodes[now].offsetWidth/2-arrowEl.offsetWidth/2+"px";
        }
        
        //内容区交互滚轮
        if(content.addEventListener){
            content.addEventListener("DOMMouseScroll",function(ev){
                ev=ev||event

                //延时定时器，在时间还没执行时，由于连续触发事件则清除了上册触发定义的延时计时器。从而达到只执行一编代码
                clearInterval(timer)
                timer=setTimeout(function(){
                    fn(ev)
                },200)
            });
        }
        content.onmousewheel=function(ev){
                ev=ev||event

                clearInterval(timer)
                timer=setTimeout(function(){
                    fn(ev)
                },200)
            }
        function fn(ev){
            ev=ev||event
            var dir="";
            if(ev.wheelDelta){
                dir=ev.wheelDelta>0?"up":"down"
            }else if(ev.detail){
                dir=ev.detail<0?"up":"down"
            }

            preIndex=now;
            switch(dir){
                case "up":
                    if(now>0){
                        now--;
                    move(now);
                    }
                    break;
                case "down":
                    if(now<4){
                        now++;
                        move(now);
                    }
                    break;
            }
        }
        //内容区交互
        function contentBind() {
            content.style.height=document.documentElement.clientHeight-head.offsetHeight+"px";
            for(var i=0;i<cLiNodes.length;i++){
                cLiNodes[i].style.height=document.documentElement.clientHeight-head.offsetHeight+"px";
            }
        }

        //头部交互
        function headBind() {
            arrowEl.style.left=firstLi.offsetLeft+firstLi.offsetWidth/2-arrowEl.offsetWidth/2+"px";
            firstUp.style.width="100%";
            for(var i=0;i<liNodes.length;i++){
                liNodes[i].index=i;
                liNodes[i].onclick=function(){
                    preIndex=now
                    console.log(preIndex)
                   move(this.index)
                   now=this.index
                }
            }

            for(var i=0;i<dotLiNodes.length;i++){
                dotLiNodes[i].index=i;
                dotLiNodes[i].onclick=function(){
                    preIndex=now;
                   move(this.index)
                   now=this.index
                }
            }

        }
       //控制箭头移动
        function move(index) {
            for(var i=0;i<upClass.length;i++){
                        //重置样式充值为空，否则会覆盖css样式中写的hover样式
                        upClass[i].style.width="";
                    }
            upClass[index].style.width="100%";
            arrowEl.style.left=liNodes[index].offsetLeft+liNodes[index].offsetWidth/2-arrowEl.offsetWidth/2+"px";
            cList.style.top=-index*(document.documentElement.clientHeight-head.offsetHeight)+"px"


            //控制右侧小圆点的动态样式，点击会切换滑动也会切换所以写在都要调用的move（）中
            for(var i=0;i<dotLiNodes.length;i++){
                        dotLiNodes[i].className="";
                    }
            dotLiNodes[index].className="active";


            //出入场  anArr[index]确保数组中有当前屏的出入场动画  typeof anArr[index].inAn=="function"确保该inAn中为一个方法可以调用
            if(anArr[index]&&typeof anArr[index].inAn=="function"){
                anArr[index].inAn()
            }
            if(anArr[preIndex]&&typeof anArr[preIndex].outAn=="function"){
                anArr[preIndex].outAn()
            }
        }

        //第一屏3d效果
        home3D();
        function home3D(){
            for(var i=0;i<home2LiNodes.length;i++){
                home2LiNodes[i].index=i;
                home2LiNodes[i].onclick=function(){
                    clearInterval(time3D);
                    for(var i=0;i<home2LiNodes.length;i++){
                        home2LiNodes[i].classList.remove("active");
                    }
                    this.classList.add("active");

                    //从左往右
                    if(this.index>oldindex){
                        home1LiNodes[this.index].classList.remove("rightHide")
                        home1LiNodes[this.index].classList.remove("leftHide")
                        home1LiNodes[this.index].classList.remove("leftShow")
                        home1LiNodes[this.index].classList.add("rightShow");
                        
                        home1LiNodes[oldindex].classList.remove("rightHide")
                        home1LiNodes[oldindex].classList.remove("leftShow")
                        home1LiNodes[oldindex].classList.remove("rightShow");
                        home1LiNodes[oldindex].classList.add("leftHide")
                    }


                    //从右往左
                    if(this.index<oldindex){
                        home1LiNodes[this.index].classList.remove("rightHide")
                        home1LiNodes[this.index].classList.remove("leftHide")
                        home1LiNodes[this.index].classList.remove("rightShow")
                        home1LiNodes[this.index].classList.add("leftShow");
                        
                        home1LiNodes[oldindex].classList.remove("leftHide")
                        home1LiNodes[oldindex].classList.remove("leftShow")
                        home1LiNodes[oldindex].classList.remove("rightShow");
                        home1LiNodes[oldindex].classList.add("rightHide")
                    }

                    //手动轮播同步自动轮播
                    autoIndex=this.index;
                    oldindex=this.index;


                    //手动点完自动轮播 重新开启定时器
                    // move();
                }
            }

            //从左向右自动轮播
            move();
            function move(){
                clearInterval(time3D);
                time3D=setInterval(function(){
                    autoIndex++;

                    //无缝
                    if(autoIndex==4){
                        autoIndex=0;
                    }
                    //小圆点
                    for(var i=0;i<home2LiNodes.length;i++){
                        home2LiNodes[i].classList.remove("active");
                    }
                    home2LiNodes[autoIndex].classList.add("active");


                    home1LiNodes[autoIndex].classList.remove("rightHide")
                    home1LiNodes[autoIndex].classList.remove("leftHide")
                    home1LiNodes[autoIndex].classList.remove("leftShow")
                    home1LiNodes[autoIndex].classList.add("rightShow");
                        
                    home1LiNodes[oldindex].classList.remove("rightHide")
                    home1LiNodes[oldindex].classList.remove("leftShow")
                    home1LiNodes[oldindex].classList.remove("rightShow");
                    home1LiNodes[oldindex].classList.add("leftHide")


                    //手动与自动轮播的同步
                    oldindex=autoIndex;
                },3000)
            }

            home1.onmouseenter=function(){
                clearInterval(time3D)
            }

            home1.onmouseleave=function(){
                move()
            }
            
        }
        

        //第四屏图片炸裂效果
        picBoom();
        function picBoom(){
            for(var i=0;i<abountUls.length;i++){
                change(abountUls[i]);
            }

            function change(UL){
                
                var src=UL.dataset.src;
                var w=UL.offsetWidth/2;
                var h=UL.offsetHeight/2;
                for(var i=0;i<4;i++){
                    var liNode=document.createElement("li");
                    var imgNode=document.createElement("img");


                    liNode.style.width=w+"px";
                    liNode.style.height=h+"px";
                    
                    imgNode.style.left=-(i%2)*w+"px";
                    imgNode.style.top=-Math.floor(i/2)*h+"px";
                    imgNode.src=src;

                    liNode.appendChild(imgNode);
                    UL.appendChild(liNode);

                }

                UL.onmouseenter=function(){
                    var imgNodes=this.querySelectorAll(" li img");
                    imgNodes[0].style.top=h+"px";
                    imgNodes[1].style.left=-2*w+"px";
                    imgNodes[2].style.left=w+"px";
                    imgNodes[3].style.top=-2*h+"px";
                    
                }
                UL.onmouseleave=function(){
                    var imgNodes=this.querySelectorAll(" li img");
                    imgNodes[0].style.top=0+"px";
                    imgNodes[1].style.left=-1*w+"px";
                    imgNodes[2].style.left=0+"px";
                    imgNodes[3].style.top=-1*h+"px";
                }
            }
        }


        // 控制小圆点样式
        dotBind();
        function dotBind() {
            arrowEl.style.left=firstLi.offsetLeft+firstLi.offsetWidth/2-arrowEl.offsetWidth/2+"px";
            firstUp.style.width="100%";
        }

        // 第五屏气泡效果
        biubiu();
        function biubiu(){
            var oc=null;
            for(var i=0;i<team3Lis.length;i++){
                
                team3Lis[i].onmouseenter=function(){
                    for(var i=0;i<team3Lis.length;i++){
                        team3Lis[i].style.opacity=.5
                    }
                    this.style.opacity=1
                    addCanvas();
                    oc.style.left=this.offsetLeft+"px"
                    
        
                }
            }

            function addCanvas(){
                if(!oc){
                    oc=document.createElement("canvas")
                    oc.width=team3Lis[0].offsetWidth;
                    oc.height=team3Lis[0].offsetHeight*2/3;
                    oc.onmouseleave=function(){
                        for(var i=0;i<team3Lis.length;i++){
                            team3Lis[i].style.opacity=1
                        }
                        removeCanvas();
                    }

                    team3.appendChild(oc);
                    qiPao();

                }
            } 

            function removeCanvas(){
                oc.remove();
                oc=null;
                clearInterval(timer1)
                clearInterval(timer2)
            }


            function qiPao(){
            
            if(oc.getContext){
                var ctx=oc.getContext("2d");
            }
            var arr=[];


            timer1=setInterval(function(){
                ctx.clearRect(0,0,oc.width,oc.height)
                for(var i=0;i<arr.length;i++){
                    arr[i].deg+=5
                    arr[i].x=arr[i].startX+Math.sin(arr[i].deg*Math.PI/180)*arr[i].step
                    arr[i].y=arr[i].startY-(arr[i].deg*Math.PI/180)*arr[i].step/2
                    
                    if(arr[i].y<=-(arr[i].r)){
                        arr.splice(i,1)
                    }
                }
            

                for(var i=0;i<arr.length;i++){
                ctx.save
                    ctx.fillStyle="rgba("+arr[i].red+","+arr[i].green+","+arr[i].blue+","+arr[i].ple+")"
                ctx.beginPath()
                ctx.arc(arr[i].x,arr[i].y,arr[i].r,0,2*Math.PI)
                ctx.fill()
                ctx.restore()
                }
            },1000/60)

               timer2=setInterval(function(){
                    
                    var r=Math.random()*10
                    var x=Math.random()*oc.width
                    
                    var y=oc.height-r

                
                    var red=Math.round(Math.random()*255)
                    var green=Math.round(Math.random()*255)
                    var blue=Math.round(Math.random()*255)
                    var ple=1
                    var deg=0
                    var startX=x
                    var startY=y
                    var step=Math.round(Math.random()*80+20)


                    arr.push({
                        x:x,
                        y:y,
                        r:r,
                        startX:startX,
                        startY:startY,
                        deg:deg,
                        red:red,
                        step:step,
                        green:green,
                        blue:blue,
                        ple:ple
                    })

                },20)


                    }
            }

    }
</script>
</html>